<script setup lang="ts">
import { h, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { MdiDelete, MdiEdit, MdiPlus } from '@vben/icons';

import { useMutation, useQuery } from '@tanstack/vue-query';
import {
  Button,
  Card,
  Descriptions,
  DescriptionsItem,
  Empty,
  message,
  Popconfirm,
  Tag,
} from 'ant-design-vue';

import { BriefDeleteTask, BriefTaskList, type BriefTaskProps } from '#/api';

import Detail from '../components/Detail.vue';
import Edit from '../components/Edit.vue';

const editRef = ref<InstanceType<typeof Edit>>();

const detailRef = ref<InstanceType<typeof Detail>>();

const { data: list, refetch: refetchList } = useQuery({
  queryKey: ['brief/taskList'],
  queryFn: () => BriefTaskList(),
});

// #删除
const { mutate: mutateDeleteTask } = useMutation({
  mutationFn: BriefDeleteTask,
  onSuccess() {
    message.success('已删除');
    refetchList();
  },
});

function handleDelete(row: BriefTaskProps) {
  mutateDeleteTask({
    id: row.id,
  });
}
</script>

<template>
  <Page description="管理所有创建的Brief项目" title="Brief项目列表">
    <template #extra>
      <Button
        :icon="
          h(MdiPlus, { class: 'inline-block mr-1 text-lg -translate-y-[1px]' })
        "
        type="primary"
        @click="editRef?.open()"
      >
        创建 Brief
      </Button>
    </template>

    <div class="grid gap-4 lg:grid-cols-2">
      <Card v-for="item in list" :key="item.id">
        <template #title>
          {{ item.name }}
          <Tag> 小红书 </Tag>
          <Tag color="green"> 进行中 </Tag>
        </template>

        <template #extra>
          <div class="space-x-2">
            <Button
              :icon="
                h(MdiEdit, {
                  class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                })
              "
              size="small"
              type="primary"
              @click="detailRef?.open({ id: item.id })"
            >
              查看
            </Button>

            <Button
              :icon="
                h(MdiEdit, {
                  class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                })
              "
              size="small"
              type="dashed"
              @click="editRef?.open({ id: item.id })"
            >
              编辑
            </Button>

            <Popconfirm
              title="您确认要删除这个项目吗?"
              @confirm="handleDelete(item)"
            >
              <Button
                :icon="
                  h(MdiDelete, {
                    class: 'inline-block mr-1 text-lg -translate-y-[2px]',
                  })
                "
                danger
                size="small"
              >
                删除
              </Button>
            </Popconfirm>
          </div>
        </template>

        <Descriptions>
          <DescriptionsItem label="投放时间">????</DescriptionsItem>
          <DescriptionsItem label="创建时间">
            {{ item.create_time }}
          </DescriptionsItem>
          <DescriptionsItem label="分配KOL">????</DescriptionsItem>
          <DescriptionsItem label="项目简述">
            <p v-if="item.result_desc">
              {{ item.result_desc }}
            </p>
            <Empty v-else class="mx-auto" description="待生成中..." />
          </DescriptionsItem>
        </Descriptions>
      </Card>
    </div>

    <Edit ref="editRef" @success="refetchList()" />
    <Detail ref="detailRef" @success="refetchList()" />
  </Page>
</template>
